<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-title">工作台</view>
      <view class="nav-right" @tap="goToMessages">
        <text class="fa fa-bell-o search-icon fa-gray"></text>
      </view>
    </view>
    <!-- 主内容 -->
    <scroll-view scroll-y class="content">
      <!-- 欢迎卡片 -->
      <view class="welcome-card">
        <view class="welcome-bg-circle welcome-bg-circle-1"></view>
        <view class="welcome-bg-circle welcome-bg-circle-2"></view>
        <view class="welcome-content">
          <view class="welcome-header">
            <view>
              <text class="welcome-greeting">欢迎回来 👋</text>
              <text class="welcome-name">Dr. 李医生</text>
              <text class="welcome-dept">ICU重症医学科</text>
            </view>
            <view class="welcome-date">
              <text class="date-label">今日</text>
              <text class="date-value">9月28日</text>
            </view>
          </view>
          <view class="welcome-footer">
            <text class="welcome-text">继续您的学习之旅</text>
            <view class="welcome-btn" @tap="goToWorkbench">
              <text class="welcome-btn-text">进入工作台</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 统计卡片 -->
      <view class="stats-container">
        <view class="stat-card">
          <view class="stat-header">
            <view class="stat-icon stat-icon-blue">
              <text class="fa fa-clock-o" style="color: #2563eb"></text>
            </view>
            <text class="stat-change stat-change-positive">+12min</text>
          </view>
          <text class="stat-label">今日学习</text>
          <view class="stat-value-row">
            <text class="stat-value">45</text>
            <text class="stat-unit">分钟</text>
          </view>
        </view>

        <view class="stat-card">
          <view class="stat-header">
            <view class="stat-icon stat-icon-amber">
              <text class="fa fa-trophy" style="color: #f59e0b"></text>
            </view>
            <text class="stat-change stat-change-positive">+2.5</text>
          </view>
          <text class="stat-label">年度学分</text>
          <view class="stat-value-row">
            <text class="stat-value">38.5</text>
            <text class="stat-unit">分</text>
          </view>
        </view>

        <view class="stat-card">
          <view class="stat-header">
            <view class="stat-icon stat-icon-red">
              <text class="fa fa-check-circle" style="color: #ef4444"></text>
            </view>
          </view>
          <text class="stat-label">待办事项</text>
          <view class="stat-value-row">
            <text class="stat-value">3</text>
            <text class="stat-unit">项</text>
          </view>
        </view>
      </view>

      <!-- 我的待办 -->
      <view class="section">
        <view class="section-header">
          <view class="section-title-row">
            <text class="section-title">我的待办</text>
            <view class="badge">
              <text class="badge-text">3</text>
            </view>
          </view>
          <text class="section-link" @tap="goToTraining">查看全部 →</text>
        </view>

        <view class="task-list">
          <!-- 任务1 -->
          <view class="task-card">
            <view class="task-content">
              <view class="task-icon task-icon-blue">
                <text class="fa fa-pencil" style="color: #2563eb"></text>
              </view>
              <view class="task-info">
                <text class="task-title">急诊科规范化培训考试</text>
                <text class="task-subtitle"
                  >理论考试 · 截止时间：明天 18:00</text
                >
              </view>
            </view>
            <view class="task-btn task-btn-blue" @tap="goToExam">
              <text class="task-btn-text">开始考试</text>
            </view>
          </view>

          <!-- 任务2 -->
          <view class="task-card">
            <view class="task-content">
              <view class="task-icon task-icon-green">
                <text class="fa fa-users" style="color: #22c55e"></text>
              </view>
              <view class="task-info">
                <text class="task-title">医疗质量管理培训</text>
                <text class="task-subtitle"
                  >线下培训 · 10月5日 14:00 · 会议室A</text
                >
              </view>
            </view>
            <view class="task-btn task-btn-green" @tap="goToTraining">
              <text class="task-btn-text">查看详情</text>
            </view>
          </view>

          <!-- 任务3 -->
          <view class="task-card">
            <view class="task-content">
              <view class="task-icon task-icon-purple">
                <text
                  class="fa fa-graduation-cap"
                  style="color: #9333ea"
                ></text>
              </view>
              <view class="task-info">
                <text class="task-title">ICU新人培训课程</text>
                <text class="task-subtitle">在线课程 · 进度 8/12 课时</text>
              </view>
            </view>
            <view class="task-btn task-btn-purple" @tap="goToCourses">
              <text class="task-btn-text">开始学习</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 最近记录 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">最近记录</text>
          <text class="section-link" @tap="goToCourses">查看全部 →</text>
        </view>

        <view class="recent-card">
          <view class="recent-icon">
            <text class="fa fa-book" style="color: white"></text>
          </view>
          <view class="recent-content">
            <view class="recent-header">
              <view>
                <text class="recent-title">ICU新人培训课程</text>
                <text class="recent-subtitle"
                  >上次学习：今天 14:30 · 第8课时</text
                >
              </view>
              <view class="recent-badge">
                <text class="recent-badge-text">进行中</text>
              </view>
            </view>
            <view class="progress-section">
              <view class="progress-header">
                <text class="progress-label">学习进度 8/12</text>
                <text class="progress-percent">67%</text>
              </view>
              <view class="progress-bar">
                <view class="progress-fill" :style="{ width: '67%' }"></view>
              </view>
            </view>
            <view class="recent-btn" @tap="goToCourses">
              <text class="recent-btn-text">继续学习</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 通知消息 -->
      <view class="section section-bottom">
        <view class="section-header">
          <text class="section-title">通知消息</text>
          <text class="section-link" @tap="goToMessages">查看更多 →</text>
        </view>

        <view class="notification-list">
          <!-- 通知1 -->
          <view class="notification-card">
            <view class="notification-icon notification-icon-red">
              <text class="fa fa-bell-o" style="color: #ef4444"></text>
            </view>
            <view class="notification-content">
              <view class="notification-header">
                <text class="notification-title">培训任务提醒</text>
                <text class="notification-time">刚刚</text>
              </view>
              <text class="notification-text"
                >今晚 19:30 开始重症患者营养支持研讨，请提前 10 分钟签到。</text
              >
              <view class="notification-footer">
                <view class="notification-tag notification-tag-red">
                  <text class="notification-tag-text">重要提醒</text>
                </view>
                <text class="notification-action">立即查看</text>
              </view>
            </view>
          </view>

          <!-- 通知2 -->
          <view class="notification-card">
            <view class="notification-icon notification-icon-amber">
              <text class="fa fa-info-circle" style="color: #f59e0b"></text>
            </view>
            <view class="notification-content">
              <view class="notification-header">
                <text class="notification-title">系统更新通知</text>
                <text class="notification-time">昨天</text>
              </view>
              <text class="notification-text"
                >本周将进行系统版本更新，期间可能出现短时维护，请提前保存学习进度。</text
              >
              <view class="notification-footer">
                <view class="notification-tag notification-tag-amber">
                  <text class="notification-tag-text">系统通知</text>
                </view>
                <text class="notification-action-read">已读</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
    };
  },
  onLoad() {
    // 获取系统状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
  },
  methods: {
    goToHome() {
      // 已在首页
    },
    goToWorkbench() {
      uni.switchTab({
        url: "/pages/workbench/workbench",
      });
    },
    goToProfile() {
      uni.navigateTo({
        url: "/pages/profile/profile",
      });
    },
    goToMessages() {
      uni.navigateTo({
        url: "/pages/message/message",
      });
    },
    goToTraining() {
      uni.navigateTo({
        url: "/pages/training/training",
      });
    },
    goToExam() {
      uni.navigateTo({
        url: "/pages/exam/exam",
      });
    },
    goToCourses() {
      uni.navigateTo({
        url: "/pages/courses/courses",
      });
    },
  },
};
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f9fafb, #eff6ff);
  display: flex;
  flex-direction: column;
}

/* 导航栏 */
.nav-bar {
  height: 44px;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav-title {
  font-size: 17px;
  font-weight: 600;
  color: #000000;
}

.nav-right {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.icon {
  font-size: 20px;
}

/* 主内容 */
.content {
  flex: 1;
  padding-bottom: 60px;
}

/* 欢迎卡片 */
.welcome-card {
  margin: 8px 16px 0;
  background: linear-gradient(to right, #2563eb, #4f46e5);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.welcome-bg-circle {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
}

.welcome-bg-circle-1 {
  width: 128px;
  height: 128px;
  top: -64px;
  right: -64px;
}

.welcome-bg-circle-2 {
  width: 96px;
  height: 96px;
  bottom: -48px;
  left: -48px;
  background-color: rgba(255, 255, 255, 0.05);
}

.welcome-content {
  position: relative;
  z-index: 1;
}

.welcome-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.welcome-greeting {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 4px;
}

.welcome-name {
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 4px;
}

.welcome-dept {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

.welcome-date {
  text-align: right;
}

.date-label {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 2px;
}

.date-value {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.welcome-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.welcome-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.welcome-btn {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 8px 16px;
}

.welcome-btn-text {
  font-size: 12px;
  color: #ffffff;
}

/* 统计卡片 */
.stats-container {
  display: flex;
  gap: 12px;
  padding: 16px 16px 0;
}

.stat-card {
  flex: 1;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon-blue {
  background-color: #dbeafe;
}

.stat-icon-amber {
  background-color: #fef3c7;
}

.stat-icon-red {
  background-color: #fee2e2;
}

.stat-change {
  font-size: 12px;
  font-weight: 500;
}

.stat-change-positive {
  color: #16a34a;
}

.stat-label {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.stat-value-row {
  display: flex;
  align-items: baseline;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #111827;
}

.stat-unit {
  font-size: 12px;
  color: #6b7280;
  margin-left: 4px;
}

/* 章节通用样式 */
.section {
  margin-top: 24px;
  padding: 0 16px;
}

.section-bottom {
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title {
  font-size: 17px;
  font-weight: bold;
  color: #111827;
}

.badge {
  width: 20px;
  height: 20px;
  background-color: #3b82f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-text {
  font-size: 12px;
  color: #ffffff;
  font-weight: bold;
}

.section-link {
  font-size: 12px;
  color: #2563eb;
  font-weight: 500;
}

/* 任务列表 */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
}

.task-content {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.task-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.task-icon-blue {
  background-color: #dbeafe;
}

.task-icon-green {
  background-color: #dcfce7;
}

.task-icon-purple {
  background-color: #f3e8ff;
}

.task-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

.task-subtitle {
  font-size: 12px;
  color: #6b7280;
}

.task-btn {
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}

.task-btn-blue {
  background-color: #2563eb;
}

.task-btn-green {
  background-color: #16a34a;
}

.task-btn-purple {
  background-color: #9333ea;
}

.task-btn-text {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}

/* 最近记录 */
.recent-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
  display: flex;
  gap: 16px;
}

.recent-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(to bottom right, #3b82f6, #4f46e5);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.recent-content {
  flex: 1;
}

.recent-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.recent-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.recent-subtitle {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 8px;
}

.recent-badge {
  background-color: #eff6ff;
  border-radius: 12px;
  padding: 4px 8px;
}

.recent-badge-text {
  font-size: 12px;
  color: #1d4ed8;
  font-weight: 500;
}

.progress-section {
  margin-bottom: 12px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.progress-label,
.progress-percent {
  font-size: 12px;
  color: #4b5563;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, #3b82f6, #4f46e5);
  border-radius: 4px;
}

.recent-btn {
  background: linear-gradient(to right, #2563eb, #4f46e5);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}

.recent-btn-text {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}

/* 通知列表 */
.notification-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notification-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
  display: flex;
  gap: 12px;
}

.notification-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notification-icon-red {
  background-color: #fee2e2;
}

.notification-icon-amber {
  background-color: #fef3c7;
}

.notification-content {
  flex: 1;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.notification-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

.notification-time {
  font-size: 12px;
  color: #9ca3af;
}

.notification-text {
  display: block;
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 8px;
  line-height: 1.5;
}

.notification-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-tag {
  border-radius: 12px;
  padding: 4px 8px;
}

.notification-tag-red {
  background-color: #fef2f2;
}

.notification-tag-amber {
  background-color: #fffbeb;
}

.notification-tag-text {
  font-size: 12px;
}

.notification-tag-red .notification-tag-text {
  color: #b91c1c;
}

.notification-tag-amber .notification-tag-text {
  color: #b45309;
}

.notification-action {
  font-size: 12px;
  color: #2563eb;
  font-weight: 500;
}

.notification-action-read {
  font-size: 12px;
  color: #6b7280;
}

/* 底部导航栏 */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-top: 1px solid #f3f4f6;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.tabbar-icon-wrap {
  position: relative;
}

.tabbar-icon {
  font-size: 22px;
}

.tabbar-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background-color: #ef4444;
  border-radius: 50%;
}

.tabbar-text {
  font-size: 12px;
  color: #6b7280;
}

.tabbar-text-active {
  color: #2563eb;
  font-weight: 500;
}

.tabbar-item-active {
  color: #2563eb;
}
</style>

